<template>
    <div>
        <el-form ref="searchFormRef" :inline="true" :model="searchForm">
            <el-form-item prop="name">
                <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
        </el-form>
        <el-table
            ref="tableRef"
            :data="tableData"
            :height="windowHeight - 220"
            :max-height="windowHeight - 220"
            stripe
            border>
            <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="age" label="年龄" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="email" label="邮件账号" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="状态" width="100" show-overflow-tooltip>
                <template #default="scope">
                    <el-tag v-if="scope.row.status">正常</el-tag>
                    <el-tag v-else type="danger">异常</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="warning" :underline="false" @click="change(scope.row)">切换</el-link>
                </template>
            </el-table-column>
            
      </el-table>
    </div>
</template>
<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core';
import { reactive, ref } from 'vue';

interface User {
    name: string;
    age: number;
    email: string;
    status: boolean;
}
const { height: windowHeight } = useWindowSize();
const searchFormRef = ref();
const searchForm = reactive({
    name: '',
    age: ''
});
const tableData = ref([
    { name: "刘备", age: 46, email: "", status: true },
    { name: "关羽", age: 43, email: "", status: true },
    { name: "张飞", age: 42, email: "", status: true },
    { name: "赵云", age: 38, email: "", status: true },
    { name: "马超", age: 34, email: "", status: true },
    { name: "黄忠", age: 68, email: "", status: false },
    { name: "诸葛亮", age: 26, email: "", status: true },
    { name: "庞统", age: 25, email: "", status: true },
    { name: "法正", age: 24, email: "", status: true },
    { name: "曹操", age: 18, email: "", status: true },
    { name: "荀彧", age: 18, email: "", status: false },
    { name: "荀攸", age: 18, email: "", status: true },
    { name: "程昱", age: 18, email: "", status: true },
    { name: "贾诩", age: 18, email: "", status: true },
    { name: "郭嘉", age: 18, email: "", status: true },
    { name: "夏侯惇", age: 18, email: "", status: false },
    { name: "夏侯渊", age: 18, email: "", status: true },
    { name: "曹仁", age: 18, email: "", status: true },
    { name: "曹洪", age: 18, email: "", status: true },
    { name: "曹真", age: 18, email: "", status: false },
    { name: "曹休", age: 18, email: "", status: true },
    { name: "曹丕", age: 18, email: "", status: true },
    { name: "曹值", age: 18, email: "", status: false },
    { name: "张辽", age: 18, email: "", status: true },
    { name: "徐晃", age: 18, email: "", status: true },
    { name: "于禁", age: 18, email: "", status: true },
    { name: "张郃", age: 18, email: "", status: true },
    { name: "乐进", age: 18, email: "", status: true },
]);


const change = (row: User) => {
    row.status = !row.status;
};
</script>
